<!--
 * @Author: 王灿
 * @Date: 2019-11-19 23:37:58
 * @LastEditTime: 2019-11-20 00:03:49
 * @Description: 功能搜索
 * @FilePath: \scarlet-sparrow-admin\src\views\components\jq-search\index.vue
 -->
<template>
  <el-form class="jq-search">
    <el-form-item v-for="(item, i) in content" :key="i">
      <el-select
        v-if="item.isSelect"
        v-model="orderAddressParams.userId"
        filterable
        remote
        reserve-keyword
        clearable
        :placeholder="item.placeholder"
        :remote-method="onGetCustomerList"
      >
        <el-option
          v-for="item in userList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input
        v-else-if="item.key === 'consignee'"
        v-model="orderAddressParams.consignee"
        :placeholder="item.placeholder"
        clearable
      ></el-input>
      <el-input
        v-else-if="item.key === 'receiveMobile'"
        v-model="orderAddressParams.receiveMobile"
        :placeholder="item.placeholder"
        clearable
      ></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import { getCustomerList } from '@/api/home.js'
export default {
  name: 'JqSearch',
  props: {
    // 订单地址搜索数组
    content: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      userList: [],
      orderAddressParams: {
        userId: '',
        consignee: '',
        receiveMobile: ''
      }
    }
  },
  watch: {
    // 订单地址搜索
    orderAddressParams: {
　　　　handler(newValue) {
          this.$emit('onChangeSearch', newValue) 
　　　　},
　　　　deep: true
　　}
  },
  created() {
    this.onGetCustomerList()
  },
  methods: {
    // 获取所有用户
    onGetCustomerList(query) {
      this.userList = []
      getCustomerList({
        realName: query
      }).then(res => {
        res.data.list.forEach(item => {
          let params = {}
          params.value = item.userId
          params.label = item.realName
          this.userList.push(params)
        })
      })
    }
  }
}
</script>

<style lang="scss">
.jq-search {
  margin: 10px 0;
  @include row;
  .el-form-item {
    margin-bottom: 0;
    width: 220px;
    margin-right: 10px;
  }
}
</style>